<template>
  <div class="all-class">
    <div class="all-class-title">
      <box-border title-button="所有课程" />
    </div>
    <div class="all-class-search">
      <div class="all-class-search-input">
        <div>
          <input v-model="className" placeholder="输入查询课程名称">
        </div>
        <el-button type="primary" icon="el-icon-search" @click="findClassName">搜索</el-button>
      </div>
      <div class="all-class-search-form">
        <el-form ref="form" :model="formSearch" label-width="120px" label-position="right">
          <el-form-item label="分类：">
            <el-radio-group v-model="formSearch.studentType">
              <el-radio-button label="所有" />
              <el-radio-button label="大学英语" />
              <el-radio-button label="雅思" />
              <el-radio-button label="托福" />
              <el-radio-button label="英语口语" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="适合范围：">
            <el-radio-group v-model="formSearch.round">
              <el-radio-button label="所有人" />
              <el-radio-button label="大学生" />
              <el-radio-button label="初中生" />
              <el-radio-button label="考证生" />
              <el-radio-button label="小学生及幼儿" />
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="all-class-content">
      <class-model v-for="oneClass in allClassList" :key="oneClass.id" class="all-class-content-model" width-height="width:250px;height:240px;">
        <template>
          <div v-if="oneClass.class_img" slot="class-img">
            <img :src="oneClass.class_img" alt="" style="width:100%;hieght:100%">
          </div>
        </template>
        <template>
          <div slot="class-name">
            {{ oneClass.class_name }}
          </div>
        </template>
        <template>
          <div slot="class-buy" @click="handleBuy(oneClass.id)">
            <a>马上购买</a>
          </div>
        </template>
      </class-model>
    </div>
    <div class="all-class-pagination">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
import _ from 'lodash'
export default {
  data() {
    return {
      currentPage: 1,
      limit: 5,
      total: 0,
      allClassList: [],
      className: '', // 搜索课程名
      formSearch: {
        round: '所有人',
        studentType: '所有'
      }
    }
  },
  computed: {
  },
  created() {
    this.getOrFindeAllClass()
  },
  mounted() {
  },
  watch: {
    formSearch: {
      handler: _.debounce(function() {
        this.getOrFindeAllClass()
      }, 2000),
      deep: true
    }

  },
  methods: {
    // 获取全部课程
    async getOrFindeAllClass() {
      const { currentPage: page, limit: size, className: class_name } = this
      const { round, studentType: type } = this.formSearch
      if (class_name) {
        Object.assign(this.$data, this.$options.data())
      }
      const result = await this.$API.classAPI.getOrFindeAllClass({
        page,
        size,
        class_name,
        round,
        type
      })
      this.allClassList = result.data.rows
      this.total = result.data.count
    },
    // 点修改当前页
    handleCurrentChange(page) {
      this.currentPage = page
      this.getOrFindeAllClass()
    },
    // 修改数目
    handleSizeChange(limit) {
      this.limit = limit
      this.getOrFindeAllClass()
    },
    // 搜索课程
    async findClassName() {
      this.getOrFindeAllClass()
    },
    // 购买课程
    handleBuy(classId) {
      this.$router.push({
        name: 'ClassInfo',
        query: { classId }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.all-class {
  .all-class-search {
    .all-class-search-input {
      margin: 90px 0;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      input {
        width: 600px;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
      el-button {
        width: 200px;
        height: 100px;
      }
    }
  }
  .all-class-content{
    display: grid;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    grid-template-columns: repeat(auto-fill, 300px);
    // .all-class-content-model:last-child{
    //   margin-right:auto;
    // }
  }
  .all-class-pagination{
      text-align: center;
      margin: 100px 0;
  }

}
</style>
